import { useEffect, useState } from 'react'
import styles from './index.module.less'
import { history } from 'umi'
import { Checkbox } from 'antd-mobile'
import { getLocalStorage, setLocalStorage } from '@/storage'
import type { ReportData, SelectOption, RoleType } from './interface'

const CheckIcon = () => <div className={styles.checkbox_icon_checked} />
const UnCheckIcon = () => <div className={styles.checkbox_icon_uncheck} />

export const GenerateReport = (props: { type: RoleType }) => {
    const [options, setOptions] = useState<SelectOption[]>([])
    const [reportData, setReportData] = useState<ReportData>()
    const [checkedOption, setCheckedOption] = useState<string[]>([])

    useEffect(() => {
        let tmpReportData: ReportData

        switch (props.type) {
            case 'department':
                tmpReportData = getLocalStorage('DEPARTMENT_REPORT_DATA')
                break
            case 'trainer':
                tmpReportData = getLocalStorage('TRAINER_REPORT_DATA')
                break
            case 'teacher':
                tmpReportData = getLocalStorage('TEACHER_REPORT_DATA')
                break
        }

        setReportData(tmpReportData)
        setOptions(tmpReportData?.allow_show_keys ?? [])
        setCheckedOption(tmpReportData?.allow_show_keys.map(item => item.key) ?? [])
    }, [props.type])

    const onGenerateReport = () => {
        setLocalStorage('GENERATE_OPTIONS', checkedOption)
        history.push({
            pathname: '/report/share',
            query: {
                type: props.type,
            },
        })
    }

    return (
        <div className={styles.page}>
            <div className={styles.text}>
                <p>2024年</p>
                <p>时间记录了</p>
                <p>{reportData?.platform}</p>
                <p>陪伴您的点点滴滴</p>
                <p>人才如粒粒种子，种子离不开这片沃土</p>

                <div className={styles.splitLine} />

                <p>2025年</p>
                <p>我们也要结伴同行</p>
            </div>

            <div className={styles.option_box}>
                <p>选择数据项生成您的专属报告</p>

                <div className={styles.splitLine} />

                <Checkbox.Group
                    value={checkedOption}
                    onChange={val => {
                        setCheckedOption(val as string[])
                    }}
                >
                    <div className={styles.checkbox_container}>
                        {options.map(item => {
                            return (
                                <div className={styles.checkbox_item} key={item.key}>
                                    <Checkbox
                                        key={item.key}
                                        value={item.key}
                                        icon={checked =>
                                            checked ? <CheckIcon /> : <UnCheckIcon />
                                        }
                                    >
                                        {item.val}
                                    </Checkbox>
                                </div>
                            )
                        })}
                    </div>
                </Checkbox.Group>
            </div>

            <div className={styles.logo_sign} />

            <div className={styles.generate_btn} onClick={onGenerateReport} />
        </div>
    )
}

export default GenerateReport
